<template>
  <div class="djLayout">
      <div class="leftLayOut">
<!--        <div class="leftBox">-->
<!--          <div class="BoxTitle">-->
<!--            班组产量-->
<!--          </div>-->
<!--          <div class="BoxBottom">-->
<!--            <div style="width: 100%;height: 50%">-->
<!--              <img src="../img/Eq.png" height="90" width="64" style="position: relative;top: 2rem;left: 26%;"/>-->
<!--              <img src="../img/boxBottom.png" height="48" width="351" style="position: relative;left: 4%;"/>-->
<!--              <div class="BoxFont">-->
<!--                <span >{{Production_Overproduction}}</span>-->
<!--              </div>-->
<!--              <div class="BoxTitleFont">-->
<!--                <span >超产</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div style="height: 50%;width: 100%">-->
<!--              <div class="boxPicture">-->
<!--                <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>-->
<!--              </div>-->
<!--              <div style="height: 100%;width: 70%;float: left;margin-left: 4%">-->
<!--                <div class="BottonValue">-->
<!--                  <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">有效平均用时（S）</span>-->
<!--                  <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Use_Time}}</span>-->
<!--                </div>-->
<!--                <div class="TimeLine">-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="leftBox" style="margin-top: 5%">
          <div class="BoxTitle">
            班组类型
          </div>
          <div style="height: 100%;width: 100%">
            <div class="BoxInner">
              <img style="" src="../img/BoxInner.png" height="104" width="347"/>
            </div>
            <div class="BoxInner" >
              <img style="" src="../img/BoxInner.png" height="104" width="347"/>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/iconCar.png" height="42" width="42" />
              </div>
              <div class="carTitleClass">
               <span>当前班组</span>
              </div>
              <div class="carValueClass">
                <span>{{Currentteam_PartCount | workGroup}}</span>
              </div>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/iconCar.png" height="42" width="42" />
              </div>
              <div class="carTitleClass">
                <span>生产数量</span>
              </div>
              <div class="carValueClass">
                <span>{{Currentteam_PartCount}}台</span>
              </div>
            </div>
          </div>
        </div>
        <div class="leftBox" style="margin-top: 5%">
          <div class="BoxTitle">
            计划产量
          </div>
          <div style="height: 100%;width: 100%">
            <div class="BoxInner" style="margin-top: 6%">
              <img style="" src="../img/BoxInner.png" height="104" width="347"/>
            </div>
            <div class="BoxInner" >
              <img style="" src="../img/BoxInner.png" height="104" width="347"/>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/PlanCount.png" height="49" width="62"/>
              </div>
              <div class="carTitleClass">
                <span>当班计划产量</span>
              </div>
              <div class="carValueClass">
                <span>{{Planned_PartCount}}台</span>
              </div>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/PlanCount.png" height="49" width="62" />
              </div>
              <div class="carTitleClass">
                <span>计划剩余产量</span>
              </div>
              <div class="carValueClass">
                <span>{{Remain_PartCount}}台</span>
              </div>
            </div>
          </div>
        </div>
        <div class="leftBox" style="margin-top: 5%">
          <div class="BoxTitle">
            拉箱数量
          </div>
          <div style="height: 100%;width: 100%">
            <div class="BoxInner" style="margin-top: 7%">
              <img style="" src="../img/BoxInner.png" height="104" width="320"/>
            </div>
            <div class="BoxInner" >
              <img style="" src="../img/BoxInner.png" height="104" width="320"/>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/iconCar.png" height="42" width="42"/>
              </div>
              <div class="carTitleClass">
                <span>有效拉箱数量</span>
              </div>
              <div class="carValueClass">
                <span>{{Use_Count}}台</span>
              </div>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/iconCar.png" height="42" width="42"/>
              </div>
              <div class="carTitleClass">
                <span>超时拉箱数量</span>
              </div>
              <div class="carValueClass">
                <span>{{OutTime_Count}}台</span>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div style="position: relative;left: -1.5%;top: 7%;width: 60%;height: 100%" >
        <img src="../img/DiJiaLayOut.png" height="65%" width="1208"/>
        <div class="bottomDiv">
          <div>
            <img src="../img/BottomBoxImg.png"  style="margin-top: -4%"/>
            <!--<img src="../img/HomeBox.png" width="95%" height="308px" style="margin-top: -4%"/>-->
          </div>
          <div class="bottomBox_Title">
            设备状态
          </div>
          <div class="EQStatus hideScrollBar" id="scrollId">
            <div v-for="(value,key,index) in EQStatusData" :key="index" class="EQStatusBox">
              <div class="BoxImg">
                <img :src=value.img width="80%" height="80%"/>
              </div>
              <div class="EQName">
                {{value.newName}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="RightLayOut">
        <div class="leftBox">
          <div class="BoxTitle">
            生产用时
          </div>
          <div style="height: 40%;width: 100%;margin-top: 5%">
            <div class="boxPicture">
              <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>
            </div>
            <div class="DivValue" style="height: 87%;margin-left: 28%;">
              <div style="height: 100%;width: 80%;margin-left: 5%">
                <div class="carTitleTopClass">
                  <span>本台生产用时（S）</span>
                </div>
                <div class="carValueBottomClass">
                  <span>{{Production_Time | formatSeconds}}</span>
                </div>
              </div>
            </div>
            <!--<div style="height: 100%;width: 70%;float: left;margin-left: 4%">
              <div class="BottonValue">
                <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">本台生产用时（S）</span>
                <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Production_Time | formatSeconds}}</span>
              </div>
              <div class="TimeLine">
                <img src="../img/TimeLine.png" height="12" width="220"/>
              </div>
            </div>-->
          </div>
          <div style="height: 40%;width: 100%;margin-top: 5%">
            <div class="boxPicture">
              <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>
            </div>
            <div class="DivValue" style="height: 87%;margin-left: 28%;">
              <div style="height: 100%;width: 80%;margin-left: 5%">
                <div class="carTitleTopClass">
                  <span>最快生产用时（S）</span>
                </div>
                <div class="carValueBottomClass">
                  <span>{{Production_Fastest_time | formatSeconds}}</span>
                </div>
              </div>
            </div>
            <!--<div style="height: 100%;width: 70%;float: left;margin-left: 4%">
              <div class="BottonValue">
                <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">本台生产用时（S）</span>
                <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Production_Time | formatSeconds}}</span>
              </div>
              <div class="TimeLine">
                <img src="../img/TimeLine.png" height="12" width="220"/>
              </div>
            </div>-->
          </div>
<!--          <div style="height: 50%;width: 100%">
            <div class="boxPicture">
              <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>
            </div>
            <div style="height: 100%;width: 70%;float: left;margin-left: 4%">
              <div class="BottonValue">
                <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">拉箱倒计时设定（S）</span>
                <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Pullbox_Set_Countdown}}</span>
              </div>
              <div class="TimeLine">
                <img src="../img/TimeLine.png" height="12" width="220"/>
              </div>
            </div>
          </div>-->
        </div>
        <div class="leftBox" style="margin-top: 5%">
          <div class="BoxTitle">
            机器人循环时间
          </div>
          <div style="height: 40%;width: 100%;margin-top: 5%">
            <div class="boxPicture">
              <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>
            </div>
            <div class="DivValue" style="height: 87%;margin-left: 28%;">
              <div style="height: 100%;width: 80%;margin-left: 5%">
                <div class="carTitleTopClass">
                  <span>机器人本次循环时间（S）</span>
                </div>
                <div class="carValueBottomClass">
                  <span>{{Cycle_Time | formatSeconds}}</span>
                </div>
              </div>
            </div>
            <!--<div style="height: 100%;width: 70%;float: left;margin-left: 4%">
              <div class="BottonValue">
                <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">本台生产用时（S）</span>
                <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Production_Time | formatSeconds}}</span>
              </div>
              <div class="TimeLine">
                <img src="../img/TimeLine.png" height="12" width="220"/>
              </div>
            </div>-->
          </div>
          <div style="height: 40%;width: 100%;margin-top: 5%">
            <div class="boxPicture">
              <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>
            </div>
            <div class="DivValue" style="height: 87%;margin-left: 28%;">
              <div style="height: 100%;width: 80%;margin-left: 5%">
                <div class="carTitleTopClass">
                  <span>机器人最快循环时间（S）</span>
                </div>
                <div class="carValueBottomClass">
                  <span>{{Pullbox_Set_Countdown | formatSeconds}}</span>
                </div>
              </div>
            </div>
            <!--<div style="height: 100%;width: 70%;float: left;margin-left: 4%">
              <div class="BottonValue">
                <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">本台生产用时（S）</span>
                <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Production_Time | formatSeconds}}</span>
              </div>
              <div class="TimeLine">
                <img src="../img/TimeLine.png" height="12" width="220"/>
              </div>
            </div>-->
          </div>
          <!--          <div style="height: 50%;width: 100%">
                      <div class="boxPicture">
                        <img src="../../../../public/static/image/Picture1.png" height="66" width="88"/>
                      </div>
                      <div style="height: 100%;width: 70%;float: left;margin-left: 4%">
                        <div class="BottonValue">
                          <span style="font-size: 14px;font-family: SourceHanSansCN-Regular, SourceHanSansCN;font-weight: 400;color: #BBE0F8;">拉箱倒计时设定（S）</span>
                          <span style="margin-left: 5%;font-size: 40px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #17FFFF;">{{Pullbox_Set_Countdown}}</span>
                        </div>
                        <div class="TimeLine">
                          <img src="../img/TimeLine.png" height="12" width="220"/>
                        </div>
                      </div>
                    </div>-->
        </div>
<!--        <div class="leftBox" style="margin-top: 5%">
          <div class="BoxTitle">
            互锁/急停情况
          </div>
          <div style="height: 100%;width: 100%">
            <div class="BoxInner" style="margin-top: 7%">
              <img style="" src="../img/BoxInner.png" height="104" width="320"/>
            </div>
            <div class="BoxInner" >
              <img style="" src="../img/BoxInner.png" height="104" width="320"/>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/iconCar.png" height="42" width="42"/>
              </div>
              <div style="height: 100%;width: 80%;margin-left: 2%">
                <div class="carTitleTopClass">
                  <span>互锁/急停发出标志</span>
                </div>
                <div class="carValueBottomClass">
                  <span>{{Pullbox_Run_Interlock | sleepValue}}</span>
                </div>
              </div>
            </div>
            <div class="DivValue">
              <div class="carClass">
                <img src="../img/iconCar.png" height="42" width="42"/>
              </div>
              <div class="carTitleClass" style="width: 60%">
                <span>互锁/急停恢复等待时间</span>
              </div>
              <div class="carValueClass" style="width: 25%;justify-content: left">
                <span>{{Pullbox_Interlock_Recovery}}S</span>
              </div>
            </div>
          </div>
        </div>-->
      </div>
  </div>
</template>

<script>
import { GetDataDJFX } from "@/api";
import { Getby_Line } from "@/api";
import { Getall_machine_status } from "@/api";
import { Getdevices } from "@/api";
import DetailViews from "../Components/DetailViews"; // 主线往复杆
import DetailViews_FuXIan from "../Components/DetailViews_FuXIan"; // 副线往复杆
import DetailViews_Yeya from "../Components/DetailViews_Yeya";
import {getDevice, getGroups} from "@/views/Home/Layout/newLabel"; // y液压站
import _ from 'lodash-es'
export default {
  components: {
    DetailViews,
    DetailViews_FuXIan,
    DetailViews_Yeya
  },
  created() {
    // Getby_Line(2, '49814752176869376').then(res=>{
    //   console.log(res)
    // })
  },
  data() {
    return {
      showNumber: '1',
      showFlag: false,
      timer: null, // 定时器名称
      "Use_Time": "0", //有效平均用时
      "Use_Count": "0", //有效拉箱数量
      "Currentteam_PartCount": "0", //当前班组
      "OutTime_Count": "0", //超时拉箱数量
      "Planned_PartCount": "0",//计划产量
      "Cycle_Time": "0",//机器人本次循环时间
      "Remain_PartCount": "0",//计划剩余产量
      "Production_Overproduction": "0",//超产
      "Production_Time": "0",//本台生产用时
      "Pullbox_Set_Countdown": "0",//机器人最快循环时间
      "Production_Fastest_time": "0",//最快生产用时
      "Production_Numeber": "0",//生产数量
      workshopId: '49814750029381632',//车间编码
      lineId: '53524290734628864',//车间编码
      DJtimer:null,
      statusTimer:null,
      EQStatusData: [],
      // EQStatusData: [
      //   {
      //     id:'1588781350319403000',
      //     QdId: '1588781350319403009',
      //     EqName: '底架过渡台',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/总装台—关机.svg'),
      //     imgname:'总装台'
      //   }, {
      //     id:'1588781350348763100',
      //     QdId: '1588781350348763137',
      //     EqName: '总装台1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/总装台—关机.svg'),
      //     imgname:'总装台'
      //   }, {
      //     id:'1588781350436843500',
      //     QdId: '1588781350436843521',
      //     EqName: '机器人箱内焊',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350407483400',
      //     QdId: '1588781350407483393',
      //     EqName: '总装台2#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/总装台—关机.svg'),
      //     imgname:'总装台'
      //   }, {
      //     id:'1588781350466203600',
      //     QdId: '1588781350466203649',
      //     EqName: '花焊',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   }, {
      //     id:'1588781350491369500',
      //     QdId: '1588781350491369474',
      //     EqName: '立焊',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350520729600',
      //     QdId: '1588781350520729601',
      //     EqName: '顶板装配',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   }, {
      //     id:'1588781350550089700',
      //     QdId: '1588781350550089730',
      //     EqName: '纵向焊',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   }, {
      //     id:'1588781350575255600',
      //     QdId: '1588781350575255553',
      //     EqName: '横向焊',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   },
      //   {
      //     id:'1588781350596227000',
      //     QdId: '1588781350596227074',
      //     EqName: '下波焊1#',
      //     EqStatus: '1',
      //     EqType: '1',
      //     img: require('../img/机器人—关机.svg'),
      //     imgname:'机器人'
      //   }
      // ],
      scrollTimer: null, // 滚动定时器
      pauseTimer: null, // 暂停定时器
      scrollDirection: 'down', // 滚动方向 up向上 down向下
      scrollId: 'scrollId', // 滚动容器id
    };
  },
  mounted() {
    this.getHomeData()
    this.getEQStatusData()
    this.DJtimer = setInterval(() => {
      this.getHomeData();
    }, window.config.timer);
    this.statusTimer = setInterval(() => {
      this.GetStatus();
    }, window.config.HomeReloadTime);
    this.dataCompleteFun()
  },
  methods: {
    getHomeData() {
      const _this= this
      GetDataDJFX().then(res => {
        var DataStr = res.data.split('<html><title>数据推送</title><body><p style="background-color:green; width:500px; word-break:break-all;white-space:normal;word-wrap:break-word;">')[1].split('</p></body></html>\r\n')[0]
        var DataJson = JSON.parse(DataStr)
        _this.Use_Time = DataJson.params.Use_Time
        _this.Use_Count = DataJson.params.Use_Count
        _this.Currentteam_PartCount = DataJson.params.Currentteam_PartCount
        _this.OutTime_Count = DataJson.params.OutTime_Count
        _this.Planned_PartCount = DataJson.params.Planned_PartCount
        _this.Cycle_Time = DataJson.params.Cycle_Time
        _this.Remain_PartCount = DataJson.params.Remain_PartCount
        _this.Production_Overproduction = DataJson.params.Production_Overproduction
        _this.Production_Time = DataJson.params.Production_Time
        _this.Pullbox_Set_Countdown = DataJson.params.Pullbox_Set_Countdown
        _this.Production_Fastest_time = DataJson.params.Production_Fastest_time
        _this.Production_Numeber = parseInt(_this.Planned_PartCount) - parseInt(_this.Remain_PartCount)
      });
    },
    // 获取设备信息
    async getEQStatusData() {
      const _this= this
      // Getby_Line(3, this.lineId).then(res => {
      //   const ret = res.data?.data?.list || []
      //   console.log(res)
      //   _this.EQStatusData = ret.map(v=>{
      //     return {
      //       ...v,
      //       img: require('../img/机器人—关机.svg'),
      //       Qdid: v.id
      //     }
      //   })
      //   console.log(_this.EQStatusData)
      //   // 获取对应关系
      //   _this.GetEQDicData();
      // });
      const ret = await getGroups(this.workshopId, this.lineId)
      const res = await getDevice(ret)
      const member = res.map(v=>v.data.data.list).flat()
      const neweStatusData = member.map(j=>{
        return {
          ...j,
          img: require('../img/机器人—关机.svg'),
          Qdid: j.id,
          newName: this.setNewName(j, ret)
        }
      })
      _this.EQStatusData = neweStatusData
      // 获取对应关系
      _this.GetEQDicData();
    },
    setNewName(val, data){
      const label = data.find(v=>v.id == val.schemeId)?.label
      return _.isUndefined(label)? val.name: `${val.name}（${label}）`
    },
    // 获取状态
    GetStatus(){
      const deviceIds = []
      this.EQStatusData.forEach(function(item, index) {
        if(item.Qdid!==null&&item.Qdid!==undefined){
          deviceIds.push(item.Qdid)
        }
      })
      const PostData = {'deviceIds':deviceIds}
      const _this=this
      Getall_machine_status(this.workshopId,PostData).then(res => {
        for(let i=0; i< res.data.data.length;i++){
          var listEQStatus = _this.EQStatusData.filter(item=> item.id === res.data.data[i].id)
          if (listEQStatus.length>0) {
            listEQStatus[0].EqStatus = res.data.data[i].status
            if ( res.data.data[i].status == '0') {
              listEQStatus[0].img = require('../img/机器人—关机.svg')
            }
            if ( res.data.data[i].status == '1') {
              listEQStatus[0].img = require('../img/机器人—正常.svg')
            }
            if ( res.data.data[i].status == '2') {
              listEQStatus[0].img = require('../img/机器人—离线.svg')
            }
            if ( res.data.data[i].status == '3') {
              listEQStatus[0].img = require('../img/机器人—报警.svg')
            }
          }
        }
      }).catch(() => {
      })
    },
    // 获取对应关系
    GetEQDicData(){
      const _this= this
      const deviceIds = []
      Getdevices().then(res => {
        if (res.data.data!== null &&res.data.data!==undefined) {
          for ( let key in res.data.data) {
            var listEQStatus = _this.EQStatusData.filter(item=> item.name === res.data.data[key])
            if(listEQStatus.length>0){
              listEQStatus[0].Qdid = key;
            }
          }
        }
        _this.GetStatus();
        this.dataCompleteFun()
      });
    },
    CLickButton(type,title){
      this.$parent.CLickButton(type,title);
    },
    // 数据加载完成方法
    dataCompleteFun() {
      // 开启滚动
      this.autoScroll()
    },
    autoScroll() {
      if (document.getElementById(this.scrollId) == null) {
        return
      }
      const scrollHeight = document.getElementById(this.scrollId).scrollHeight
      const clientHeight = document.getElementById(this.scrollId).clientHeight
      const scroll = scrollHeight - clientHeight
      // 滚动长度为0
      if (scroll === 0) {
        return
      }
      // 触发滚动方法
      this.scrollFun()
      // 去除点击监听
      window.document.removeEventListener('click', this.pauseScroll)
      // 重设点击监听
      window.document.addEventListener('click', this.pauseScroll, false)
    },
    pauseScroll() {
      // 定时器不为空
      if (this.scrollTimer) {
        // 清除定时器
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
        // 一秒钟后重新开始定时器
        this.pauseTimer = setTimeout(() => {
          this.scrollFun()
        }, 2000)
      }
    },
    scrollFun() {
      // 如果定时器存在
      if (this.scrollTimer) {
        // 则先清除
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
      this.scrollTimer = setInterval(() => {
        if (document.getElementById(this.scrollId) == null) {
          return
        }
        const scrollHeight = document.getElementById(this.scrollId).scrollHeight
        const clientHeight = document.getElementById(this.scrollId).clientHeight
        const scroll = scrollHeight - clientHeight
        // 获取当前滚动条距离顶部高度
        const scrollTop = document.getElementById(this.scrollId).scrollTop
        // 向下滚动
        if (this.scrollDirection === 'down') {
          const temp = scrollTop + 1
          document.getElementById(this.scrollId).scrollTop = temp // 滚动
          // 距离顶部高度  大于等于 滚动长度
          if (scroll <= temp) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
            // 改变方向
            this.scrollDirection = 'up'
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun()
            }, 500)
          }
          // 向上滚动
        } else if (this.scrollDirection === 'up') {
          const temp = scrollTop - 0.5
          document.getElementById(this.scrollId).scrollTop = temp // 滚动
          // 距离顶部高度  小于等于 0
          if (temp <= 0) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
            // 改变方向
            this.scrollDirection = 'down'
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun()
            }, 500)
          }
        }
      }, 50)
    }
  },
  filters: {
    workGroup: function (value) {
      if (value==='0') {
        return '底架'
      } else if(value==='1') {
        return '底架'
      } else {
        return '底架'
      }
    },
    productType: function (value) {
      if (value==='0') {
        return '20GP'
      } else if(value==='1') {
        return '40GP'
      } else if(value==='2') {
        return '40HC'
      } else if(value==='3') {
        return '45HC'
      } else if(value==='4') {
        return '箱型错误'
      }
    },
    sleepValue: function (value) {
      if (value==='0') {
        return '拉箱过程中无互锁或急停'
      } else if(value==='1') {
        return '拉箱过程中有互锁或急停'
      }
    },
    //秒数转化为时分秒
    formatSeconds: function(value) {
      var secondTime = parseInt(value);// 秒
      var minuteTime = 0;// 分
      var hourTime = 0;// 小时
      if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if(minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      if((secondTime+"").length===1){
        secondTime = "0" + secondTime
      }
      var result = "" + secondTime + "";

      if(minuteTime > 0) {
        if((minuteTime+"").length===1){
          minuteTime = "0" + minuteTime
        }
        result = "" + parseInt(minuteTime) + ":" + result;
      } else {
        result = "00"  + ":" + result;
      }
      if(hourTime > 0) {
        if((hourTime+"").length===1){
          hourTime = "0" + hourTime
        }
        result = "" + hourTime + ":" + result;
      } else {
        result = "00"  + ":" + result;
      }
      console.log('result',result);
      return result;
    }
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.pauseTimer)
    this.pauseTimer = null
    clearInterval(this.scrollTimer)
    clearInterval(this.statusTimer)
    this.scrollTimer = null
    clearTimeout(this.DJtimer)
    this.DJtimer = null
    this.statusTimer = null
    // 清理点击监听
    window.document.removeEventListener('click', this.pauseScroll)
  }
};
</script>

<style lang="scss" scoped>
  .djLayout {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .leftLayOut{
      height: 100%;
      width: 20%;
      z-index: 99999;
      margin-left: 1%;
      .leftBox{
       background-image: url("../img/HomeBox.png");
        background-size: cover;
        height: 32%;
        width: 100%;
        .BoxBottom{
         height: 100%;
         width: 100%;
        }
        .BoxTitleFont{
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #BBE0F8;
          position: relative;
          top: -7rem;
          left: 44%;
        }
        .boxPicture{
          width: 20%;
          float: left;
          margin-left: 5%;
          margin-top: 7%;
         /* position: relative;
          left: 7%;
          top: -4rem;*/
        }
        .TimeLine{
          width: 220px;
          height: 12px;
          background: linear-gradient(90deg, #0282F9 0%, #01F1CC 100%);
         /* position: relative;
          top: -5.5rem;
          left: 31%;*/
        }
        .BottonValue{
          margin-top: 5%;
          margin-bottom: 5%;
        /*  position: relative;
          top: -9.5rem;
          left: 31%;*/
        }
        .BoxFont{
          font-size: 40px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #17FFFF;
          position: relative;
          top: -7rem;
          left: 49%;
        }
        .BoxTitle{
          position: relative;
          left: 10%;
          top: 3%;
          font-size: 20px;
          font-family: PangMenZhengDao;
          color: #FFFFFF;
          line-height: 23px;
          letter-spacing: 1px;
          background: linear-gradient(360deg, #8CC6FF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .BoxInner{
          height: 35%;
          width: 100%;
          margin-top: 5%;
          /* text-align: center; */
          display: flex;
          justify-content: center;
          align-items: center;
/*          background-image: url("../img/BoxInner.png");
          background-size: cover;
          height: 93.6px;
          width: 312.3px;*/
          /*margin-top: 7%;
          margin-left:9%;*/
        }
        .DivValue{
          height: 40%;
          width: 100%;
          z-index: 999999;
          position: relative;
          top:-80%;
          display: flex;
          .carClass{
            height: 100%;
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
          .carTitleClass{
            height: 100%;
            width: 32%;
            display: flex;
            justify-content: left;
            align-items: center;
            font-size: 18px;
            margin-left: 2%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #BBE0F8;
          }
          .carValueClass{
            height: 100%;
            width: 40%;
            display: flex;
            justify-content: left;
            align-items: center;
            font-size: 40px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #17FFFF;
          }
        }
      }
    }
    .RightLayOut{
      height: 100%;
      width: 18%;
      z-index: 99999;
      .leftBox{
        background-image: url("../img/HomeBox.png");
        background-size: cover;
        height: 32%;
        width: 100%;
        .boxPicture{
          width: 20%;
          float: left;
          margin-left: 5%;
          margin-top: 7%;
          /* position: relative;
           left: 7%;
           top: -4rem;*/
        }
        .BottonValue{
          margin-top: 5%;
          margin-bottom: 4%;
        }
        .TimeLine{
          width: 220px;
          height: 12px;
        }
        .BoxTitle{
          position: relative;
          left: 10%;
          top: 3%;
          font-size: 20px;
          font-family: PangMenZhengDao;
          color: #FFFFFF;
          line-height: 23px;
          letter-spacing: 1px;
          background: linear-gradient(360deg, #8CC6FF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          .BoxFont{
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #17FFFF;
          }
        }
        .BoxInner{
          height: 35%;
          width: 100%;
          margin-top: 5%;
          /* text-align: center; */
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .DivValue{
          height: 40%;
          width: 100%;
          z-index: 999999;
          position: relative;
          top:-80%;
          display: flex;
          .carClass{
            height: 100%;
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
          .carTitleClass{
            height: 100%;
            width: 32%;
            display: flex;
            justify-content: left;
            align-items: center;
            font-size: 16px;
            margin-left: 2%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #BBE0F8;
          }
          .carTitleTopClass{
            height: 15%;
            margin-top: 10%;
            width: 100%;
            display: flex;
            justify-content: left;
            align-items: center;
            font-size: 16px;
            margin-left: 2%;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #BBE0F8;
          }
          .carValueClass{
            height: 100%;
            width: 40%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #17FFFF;
          }
          .carValueBottomClass{
            height: 50%;
            width: 100%;
            display: flex;
            justify-content: left;
            align-items: center;
            font-size: 22px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #17FFFF;
          }
        }
      }
    }
    .EQDetail{
      width: 30rem;
      height: 30rem;
      background: linear-gradient(180deg, rgba(79,191,243,0) 0%, #278BE3 100%);
      opacity: 0.9;
      position: relative;
      left: 70%;
      top: 2%;
      padding: 1%;
      .dataItem{
        width: 100%;
        height: 15%;
        background: rgba(11,32,84,0.3500);
        border: 1px solid #2C84DA;
        margin-top: 1.5%;
        .valueClass{
          height: 50%;
          width: 100%;
          float: left;
          font-size: 18px;
          font-family: FZHZGBJW;
          font-weight: bold;
          color: #16E7FF;
          display: flex;
          align-items: center;
          margin-left: 5%;
        }
        .titleClass{
          height: 50%;
          width: 100%;
          float: left;
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          margin-left: 5%;
        }
      }
    }
    .layout-box {
      height: 50%;
      width: 33%;
      padding: 14px;
      .content-box {
        width: 100%;
        height: 100%;
        background: rgba(32, 34, 51, 0.4);
        box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.18);
        padding: 20px;
      }
    }
    .bottomDiv{
      height: 308px;
      width: 100%;
      z-index: 99999;
      margin-left: 5%;
      .bottomBox_Title{
        font-size: 20px;
        font-family: PangMenZhengDao;
        color: #FFFFFF;
        line-height: 18px;
        letter-spacing: 1px;
        background: linear-gradient(360deg, #8CC6FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        top: -99%;
        left: 3%;
      }
      .EQStatus{
        width: 95%;
        height: 270px;
        position: relative;
        top: -96%;
        overflow-y: scroll;
        scrollbar-width: none !important; /* Firefox隐藏滚动条 */
        -ms-overflow-style: none !important; /* Internet Explorer 10+隐藏滚动条 */
        ::-webkit-scrollbar {
          width: 0 !important;      /* Safari,Chrome 隐藏滚动条 */
          height: 0 !important;     /* Safari,Chrome 隐藏滚动条 */
          display: none !important; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
        }
        .EQStatusBox{
          height: 50%;
          width: 10%;
          margin-top: 1%;
          margin-left: 1%;
          float: left;
          .BoxImg{
            height: 55%;
            width: 100%;
            text-align: center;
          }
          .EQName{
            text-align: center;
            font-size: 16px;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical
          }
        }
      }
    }
  }
  .hideScrollBar::-webkit-scrollbar {
    width: 0
  }
  .hideScrollBar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
</style>
